<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../resources/css/base.css">
	<script type="text/javascript" src="../third-party/jQuery.js"></script>
	<script type="text/javascript" src="../third-party/vue.js"></script>
	<script type="text/javascript" src="../resources/js/nwx.js"></script>
	
	<style>
		.tab {
			position: relative;
			overflow: hidden;
			background: #fff;
			width: 100%;
			font-family: 'Roboto', sans-serif;
			line-height: 1.5;
			font-weight: 300;
			color: #888;
			-webkit-font-smoothing: antialiased;
		}
		
		.tabs {
			display: table;
			position: relative;
			overflow: hidden;
			margin: 0;
			width: 100%;
			padding:0;
			border-bottom: 2px solid #87d3b7;
		}
		.tabs li {
			float: left;
			line-height: 38px;
			overflow: hidden;
			padding: 0;
			position: relative;
			-webkit-user-select: none;
		}
		.tabs a {
			background-color: #eff0f2;
			border-bottom: 1px solid #fff;
			color: #888;
			font-weight: 500;
			display: block;
			letter-spacing: 0;
			outline: none;
			padding: 0 20px;
			height:100%;
			text-decoration: none;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			/*border-bottom: 2px solid #87d3b7;*/
		}
		
		.tabs_item {
			display: none;
			padding: 30px 0;
		}
		.tabs_item h4 {
			font-weight: bold;
			color: #87d3b7;
			font-size: 20px;
		}
		.tabs_item img {
			width: 200px;
			float: left;
			margin-right: 30px;
		}
		.tabs_item:first-child {
			display: block;
		}
		
		.current a {
			color: #fff;
			background: #87d3b7;
		}
	
	</style>
</head>
<body>
	<div class="tab">
		<ul class="tabs">
			<li><a href="#">快捷方式</a></li>
			<li><a href="#">小工具</a></li>
		</ul> <!-- / tabs -->
		
		<div class="tab_content">
			<div class="tabs_item">
				<script>output('page/tab/shortcut.html')</script>
			</div> <!-- / tabs_item -->
			
			<div class="tabs_item">
				<script>output('page/tab/small-tools.html')</script>
			</div> <!-- / tabs_item -->
		</div> <!-- / tab_content -->
	</div> <!-- / tab -->
	
	<script>
		$(document).ready(function() {
			
			(function ($) {
				$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
				
				$('.tab ul.tabs li a').click(function (g) {
					var tab = $(this).closest('.tab'),
						index = $(this).closest('li').index();
					
					tab.find('ul.tabs > li').removeClass('current');
					$(this).closest('li').addClass('current');
					
					tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
					tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
					
					g.preventDefault();
				} );
			})(jQuery);
			
		});
	</script>
</body>
</html>